<template>
  <div class="daily-data-container">
    <!-- 查询区域 -->
    <el-card class="search-card">
      <el-form :model="searchForm" ref="searchFormRef" :inline="true">
        <el-form-item label="采集点">
          <el-select 
            v-model="searchForm.collectionPoint" 
            placeholder="请选择采集点"
            clearable
          >
            <el-option
              v-for="point in collectionPoints"
              :key="point.value"
              :label="point.label"
              :value="point.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="设备名称">
          <el-select 
            v-model="searchForm.deviceId" 
            placeholder="请选择设备"
            clearable
          >
            <el-option
              v-for="device in devices"
              :key="device.value"
              :label="device.label"
              :value="device.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcuts"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>查询
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
          <el-button type="success" @click="handleExport">
            <el-icon><Download /></el-icon>导出
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据列表 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>日数据列表</span>
          <div class="header-right">
            <el-button-group>
              <el-button :type="viewType === 'table' ? 'primary' : ''" @click="viewType = 'table'">
                <el-icon><Grid /></el-icon>
              </el-button>
              <el-button :type="viewType === 'chart' ? 'primary' : ''" @click="viewType = 'chart'">
                <el-icon><TrendCharts /></el-icon>
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>

      <!-- 表格视图 -->
      <div v-show="viewType === 'table'" class="table-view">
        <el-table
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: 'rgba(255, 255, 255, 0.05)' }"
        >
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="collectionPoint" label="采集点" width="120" />
          <el-table-column prop="deviceName" label="设备名称" width="150" />
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="totalValue" label="日累计值" width="120">
            <template #default="{ row }">
              {{ row.totalValue }} {{ row.unit }}
            </template>
          </el-table-column>
          <el-table-column prop="maxValue" label="最大值" width="120">
            <template #default="{ row }">
              {{ row.maxValue }} {{ row.unit }}
            </template>
          </el-table-column>
          <el-table-column prop="minValue" label="最小值" width="120">
            <template #default="{ row }">
              {{ row.minValue }} {{ row.unit }}
            </template>
          </el-table-column>
          <el-table-column prop="avgValue" label="平均值" width="120">
            <template #default="{ row }">
              {{ row.avgValue }} {{ row.unit }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="180" />
          <el-table-column prop="remark" label="备注" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- 图表视图 -->
      <div v-show="viewType === 'chart'" class="chart-view">
        <div class="chart" ref="chartRef"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { Search, Refresh, Download, Grid, TrendCharts } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import * as echarts from 'echarts'

// 查询表单
const searchForm = reactive({
  collectionPoint: '',
  deviceId: '',
  dateRange: []
})

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  }
]

// 采集点选项
const collectionPoints = [
  { label: 'A采集点', value: 'A' },
  { label: 'B采集点', value: 'B' },
  { label: 'C采集点', value: 'C' }
]

// 设备选项
const devices = [
  { label: '1号设备', value: '1' },
  { label: '2号设备', value: '2' },
  { label: '3号设备', value: '3' }
]

// 表格数据
const loading = ref(false)
interface TableItem {
  collectionPoint: string
  deviceName: string
  date: string
  totalValue: number
  maxValue: number
  minValue: number
  avgValue: number
  unit: string
  updateTime: string
  remark: string
}

const tableData = ref<TableItem[]>([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 视图类型
const viewType = ref('table')

// 图表实例
let chart: echarts.ECharts | null = null

// 查询方法
const handleSearch = async () => {
  loading.value = true
  try {
    // 这里添加实际的查询逻辑
    await new Promise(resolve => setTimeout(resolve, 1000))
    // 模拟数据
    tableData.value = Array(10).fill(0).map((_, index) => ({
      collectionPoint: 'A采集点',
      deviceName: '1号设备',
      date: '2024-02-20',
      totalValue: 1234.56,
      maxValue: 100.5,
      minValue: 50.2,
      avgValue: 75.8,
      unit: 'kWh',
      updateTime: '2024-02-20 14:30:00',
      remark: '正常'
    }))
    total.value = 100
  } finally {
    loading.value = false
  }
}

// 重置方法
const handleReset = () => {
  searchForm.collectionPoint = ''
  searchForm.deviceId = ''
  searchForm.dateRange = []
  handleSearch()
}

// 导出方法
const handleExport = () => {
  // 这里添加导出逻辑
}

// 分页方法
const handleSizeChange = (val: number) => {
  pageSize.value = val
  handleSearch()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  handleSearch()
}

// 初始化图表
const initChart = () => {
  const chartDom = document.querySelector('.chart-view .chart')
  if (!chartDom) return
  
  chart = echarts.init(chartDom)
  chart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['日累计值', '最大值', '最小值', '平均值']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '日累计值',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '最大值',
        type: 'line',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '最小值',
        type: 'line',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '平均值',
        type: 'line',
        data: [320, 332, 301, 334, 390, 330, 320]
      }
    ]
  })
}

// 生命周期钩子
onMounted(() => {
  handleSearch()
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  chart?.dispose()
  window.removeEventListener('resize', handleResize)
})

// 窗口大小变化时重绘图表
const handleResize = () => {
  chart?.resize()
}
</script>

<style lang="scss" scoped>
.daily-data-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .search-card,
  .table-card {
    background: rgba(255, 255, 255, 0.05);
    border: none;

    :deep(.el-card__header) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 12px 20px;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .table-view {
    :deep(.el-table) {
      background: transparent;
      
      th.el-table__cell {
        background-color: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: $text-color;
      }
      
      td.el-table__cell {
        background-color: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: $text-color;
      }
    }

    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .chart-view {
    .chart {
      height: 500px;
    }
  }
}
</style>
